<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="" href="./font-awesome/css/font-awesome.css">
    <title>Document</title>

    <style>
        body {

            /*  */
            margin: 0;
            height: 1500px;
            /* 18838143070 */
        }

        .main {
            height: 28px;
            background-color: #f5f5f5;
        }

        .box {
            width: 1150px;
            height: 27px;
            /* background-color: darkblue; */
            margin: 0 auto;
            display: flex;
            justify-content: space-around;
        }

        .left {
            width: 200px;
            margin-top: -10px;
            position: relative;
        }

        .right {
            width: 800px;
            margin-top: -10px;
        }

        .right .nav {
            display: flex;
            justify-content: space-around;
        }

        .right .nav li {
            list-style: none;
        }

        .right .nav a {
            text-decoration: none;
            color: #666;
            padding-left: 5px;
        }

        .right .nav a:hover {
            color: #f10180;
        }

        .left .difang {
            list-style: none;
        }

        .left a {
            text-decoration: none;
            color: black;
        }

        .left .difang {
            width: 200px;
            position: absolute;

            top: 20px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
        }

        .left li {
            margin-left: -30px;
        }

        .left li:hover {
            color: #f10180;
        }

        .left span {
            margin-left: -20px;
        }

        hr {
            width: 200px;
            margin-left: -30px;
        }

        .left .difang {
            visibility: hidden;
        }

        .left p {
            width: 100px;
        }

        .left:hover .difang {
            visibility: visible;
        }

        .right .login {
            width: 200px;
            height: 150px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
        }

        .right .login span:hover {
            color: #f10180;
        }

        .right .login span::before {
            content: '';
            display: inline-block;
            width: 40px;
            height: 40px;
            background-image: url(header.png);
            background-position: 0 -195px;
            position: relative;
            top: 20px;
            left: -10px;
        }

        .right .login li {
            display: inline-block;
            width: 95px;
        }

        .right .logins {
            position: relative;
        }

        .right .login {
            position: absolute;
            visibility: hidden;
        }

        .logins:hover .login {
            visibility: visible;
        }

        .right .qian {
            position: relative;
        }

        .right .qian::before {
            content: '';
            display: inline-block;
            background-image: url(002.png);
            width: 15px;
            height: 15px;
            position: relative;
        }

        .right .tian {
            width: 350px;
            height: 200px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
            top: 20px;
            left: -50px;
            position: absolute;
        }

        .right .qian li {
            width: 30px;
            float: left;
        }

        .right .tian {
            visibility: hidden;
        }

        .right .qian:hover .tian {
            visibility: visible;
        }

        .right .mais {
            position: relative;
        }

        .right .mai {
            position: absolute;
            width: 150px;
            height: 80px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
            left: -40px;
            visibility: hidden;
            border-top: none;
        }

        .right .mais:hover .mai {
            visibility: visible;
        }

        .right .happys {
            position: relative;
        }

        .right .happy {
            position: absolute;
            width: 150px;
            height: 80px;
            border: 1px solid #666666;
            background-color: #fff;
            z-index: 999;
            left: -35px;
            visibility: hidden;
            border-top: none;
        }

        .right .happys:hover .happy {
            visibility: visible;
        }

        .right .servers {
            position: relative;
        }

        .right .server {
            width: 150px;
            height: 100px;
            position: absolute;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
            left: -35px;
            visibility: hidden;
            border-top: none;
        }

        .right .servers:hover .server {
            visibility: visible;
        }

        .right .shous {
            position: relative;
        }

        .right .shous::before {
            content: '';
            display: inline-block;
            background-image: url(header.png);
            background-position: -95px -149px;
            width: 15px;
            height: 15px;
        }

        .right .shous img {
            /* position: absolute; */
            width: 170px;
            height: 170px;
            margin-left: -35px;
        }

        .right .shou {
            position: absolute;
            width: 160px;
            height: 200px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
            left: -70px;
            text-align: center;
            visibility: hidden;
        }

        .right .shou li:nth-child(2) {
            margin-left: -35px;
        }

        .right .shous:hover .shou {
            visibility: visible;
        }

        .right .ends {
            position: relative;
        }

        .right .end {
            position: absolute;
            width: 250px;
            height: 210px;
            border: 1px solid #666;
            background-color: #fff;
            z-index: 999;
            left: -260px;
            visibility: hidden;
        }

        .right .ends:hover .end {
            visibility: visible;
        }

        .img {
            width: 1150px;
            height: 100px;
            /* background-color: saddlebrown; */
            margin: 0 auto;
            /* margin-top: 10px; */
            position: relative;
            display: flex;
            justify-content: space-between;
            z-index: 99;
        }

        img .zuo {
            width: 300px;
            height: 100px;
            background-color: khaki;
        }

        .img .logo {
            width: 135px;
            height: 60px;
            background-image: url(header.png);
            background-position: -167px 10px;
            position: absolute;
            top: 20px;
        }

        .img .you {
            width: 600px;
            /* background-color: salmon; */
            display: flex;
            justify-content: space-around;
        }

        .img .zlogo {
            width: 110px;
            height: 50px;
            background-image: url(header.png);
            background-position: -151px -50px;
            margin-top: 23px;
        }

        .img .tlogo {
            width: 110px;
            height: 50px;
            background-image: url(header.png);
            background-position: -151px -95px;
            margin-top: 23px;
        }

        .img .hlogo {
            width: 115px;
            height: 50px;
            background-image: url(header.png);
            background-position: -150px -145px;
            margin-top: 23px;
        }

        .img .wlogo {
            width: 115px;
            height: 50px;
            color: #614541;
            margin-top: 30px;
        }

        .img .wlogo::before {
            content: '';
            display: inline-block;
            width: 20px;
            height: 30px;
            background-image: url(header.png);
            background-position: 0px -60px;
            position: relative;
            top: 15px;
        }

        .navs {
            height: 50px;
            background-color: #f10180;
        }

        .navs .head {
            display: flex;
            justify-content: space-between;
            width: 1150px;
            margin: 0 auto;
            /* background-color: lawngreen; */
        }

        .navs .zuos .yi {


            background-color: #bd1067;
        }

        .navs ul {
            width: 60px;
            height: 50px;
            margin-top: -1px;
            color: white;
        }

        .navs li {
            line-height: 60px;
            width: 100px;
            text-align: center;
        }

        .navs li:hover {
            background-color: #bd1067;
        }

        .navs .zuos ul {
            width: 600px;
            list-style: none;
            display: flex;
            justify-content: space-between;
        }

        .navs .yous ul {
            width: 200px;
            list-style: none;
            display: flex;
            justify-content: space-around;
        }

        .zuos .geng {
            position: relative;
        }

        .zuos .geng ul {
            position: absolute;
            width: 600px;
            height: 260px;
            background-color: #fff;
            display: flex;
            justify-content: space-between;
            flex-wrap: wrap;
            left: -570px;
            visibility: hidden;
            top: 50px;
            z-index: 999;
        }

        .zuos .geng:hover ul {
            visibility: visible;
        }
        /*轮播图  */

        .back {
            width: 100%;
            margin: 0;
            height: 440px;

            background-image: url(111.jpg);
            background-size: 100%;
            max-width: 1900px;
            min-width: 1900px;
            margin: 0 auto;
        }

        .back .again img {
            width: 1020px;
            height: 400px;
        }

        .back .again {
            width: 1100px;
            margin: 0 auto;
            position: relative;
        }

        .back .again ul {
            position: absolute;
            top: 50px;
        }

        .back .again ul li {
            list-style: none;
            position: absolute;
            display: none;
        }

        .back .heng {
            display: flex;
            width: 1000px;
            justify-content: space-between;
            position: absolute;
            top: 470px;
            left: 40px;
        }

        .back section {
            width: 300px;
            height: 20px;
            background-color: #666;
            top: 470px;
            left: 40px;
            transition: all 0.7s linear;
        }

        .back .again ul .atc {
            display: block;
        }

        .back .heng .atv {
            background-color: #bd1067;
        }

        .back .lr span {
            border-radius: 5px;
            width: 30px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            color: white;
            background-color: rgba(0, 0, 0, 0.1);
            position: absolute;

            display: none;
        }

        .back .lr span:hover {
            background-color: #757c7c;
            cursor: pointer;
        }

        .back .lr .prev {
            top: 250px;
            left: 50px;
        }

        .back .lr .next {
            top: 250px;
            right: 50px;
        }

        .bott {
            width: 1150px;
            margin: 0 auto;
            margin-top: 80px;
            display: flex;
            justify-content: space-between;
        }
        /*右边  */

        section {
            width: 1150px;
            margin: 0 auto;
            text-align: center;
        }

        .yao {
            width: 40px;
            height: 100vh;
            background-color: #262626;
            /* float: right; */
            position: fixed;
            top: 0;
            right: 0;
            z-index: 9999;
        }

        .yao .shang ul {
            position: absolute;
            right: 5px;
            text-align: center;
            font-size: 18px;
            list-style: none;
        }

        .yao .shang ul .yi {
            width: 36px;
        }

        .yao .shang .zhanghao li:hover {
            color: #df147f;
        }

        .yao .shang .zhanghao {
            width: 300px;
            height: 200px;
            background-color: #666;
            display: flex;
            right: -345px;
            top: 25px;
            /* visibility: hidden;   */
            z-index: 999;
            transition: all 0.5 linear;
        }

        .yao .shang ul .yi:hover .zhanghao {
            /* visibility: visible; */
            right: 35px;
            top: 25px;
            transition: all 5 linear;
        }

        .yao .shang .zhanghao span {
            width: 300px;
            text-align: center;
            position: relative;
            left: 80px;
            top: 20px;
        }

        .yao .shang .zhanghao li {
            /* display: inline-block; */
            width: 200px;
            height: 100px;
            position: relative;
            top: 40px;
            right: 60px;
        }

        .yao>.shang>.zhanghao>li:hover {
            color: #df147f;
        }

        .yao .shang ul .yi {
            top: 20px;
            left: 200px;
        }

        .yao .shang ul .er {
            width: 35px;
            background-color: #df147f;
        }


        .yao .shang ul li {

            padding-top: 30px;
            padding-bottom: 30px;
        }

        .yao>.shang>ul>li:hover {
            background-color: #df147f;
        }

        .yao .shang ul a {
            text-decoration: none;
            color: white;
        }

        .yao .shang {
            position: relative;
        }

        .yao .shang ul {
            position: absolute;
        }
    </style>
</head>

<body>
    <!--头部  -->
    <div class="main">
        <div class="box">
            <div class="left">
                <p>河南
                    <ul class="ull difang">
                        <span>请选择售货区</span>
                        <hr>
                        <li><a href="#">A</a> &nbsp;河南</li>
                        <li><a href="#">B</a> &nbsp;海南</li>
                        <li><a href="#">C</a> &nbsp;南京</li>
                    </ul>
                </p>
            </div>
            <div class="right">
                <ul class="nav">
                    <li class="logins"><a href="#">请登录</a> &nbsp;/
                        <ul class="ull login">
                            <span>你好:[请登录]</span>
                            <hr>
                            <li><a href="#">我的收藏</a></li>
                            <li><a href="#">我的订单</a></li>
                            <li><a href="#">零钱</a></li>
                            <li><a href="#">我的优惠卷</a></li>
                            <li><a href="#">我的唯品币</a></li>
                            <li><a href="#">唯品金融</a></li>
                        </ul>
                    </li>
                    <li><a href="#">注册</a>&nbsp;/</li>
                    <li class="qian"><a href="#">签到有礼</a>&nbsp;/
                        <ul class="ull tian">
                            <li>1天</li>
                            <li>2天</li>
                            <li>3天</li>
                            <li>4天</li>
                            <li>5天</li>
                            <li>6天</li>
                            <li>7天</li>
                        </ul>
                    </li>
                    <li><a href="#">我的订单</a>&nbsp;/</li>
                    <li class="mais"><a href="#">我的特卖</a>&nbsp;/
                        <ul class="ull mai">
                            <li><a href="#">品牌收藏(0)</a></li>
                            <li><a href="#">商品收藏(0)</a></li>
                            <li><a href="#">我的足迹(0)</a></li>
                        </ul>
                    </li>
                    <li class="happys"><a href="#">会员俱乐部</a>&nbsp;/
                        <ul class="ull happy">
                            <li><a href="#">俱乐部首页</a></li>
                            <li><a href="#">唯品币兑换</a></li>
                            <li><a href="#">免费抽大奖</a></li>
                        </ul>
                    </li>
                    <li class="servers"><a href="#">客户服务</a>&nbsp;/
                        <ul class="ull server">
                            <li><a href="#">联系客服</a></li>
                            <li><a href="#">帮助中心</a></li>
                            <li><a href="#">服务中心</a></li>
                            <li><a href="#">知识产权投诉</a></li>
                        </ul>
                    </li>
                    <li class="shous"><a href="#">手机版</a>&nbsp;/
                        <ul class="ull  shou">
                            <li><a href="#"><img src="001.jpg" alt=""></a></li>
                            <li><a href="#">随时逛&nbsp; 随时抢</a></li>

                        </ul>

                    </li>
                    <li class="ends"><a href="#">更多</a>
                        <ul class="ull end">
                            <li>
                                <a href="#">
                                    <h3>合作专区</h3>
                                </a>
                                <a href="">联名卡申请&nbsp;唯品卡&nbsp;支付专区</a>
                            </li>
                            <li>
                                <a href="#">
                                    <h3>关于我们</h3>
                                </a>
                                <a href="">sell on vip &nbsp;品牌招商&nbsp; 官方微博</a>
                            </li>
                        </ul>
                    </li>
                </ul>
            </div>
        </div>
    </div>
    <!--logo  -->
    <div class="img">
        <div class="zuo">
            <div class="logo">

            </div>

        </div>
        <div class="you">

            <section class="zlogo"></section>
            <section class="tlogo"></section>
            <section class="hlogo"></section>
            <section class="wlogo">我的购物袋</section>

        </div>

    </div>
    <!--主题  添加滚动事件-->
    <div class="navs">
        <div class="head">
            <div class="zuos">
                <ul>
                    <li class="yi">首页</li>
                    <li>唯品国际</li>
                    <li>母婴</li>
                    <li>家具电器</li>
                    <li>男士</li>
                    <li>美妆</li>
                    <li>生活超市</li>
                    <li>金融</li>
                    <li class="geng">更多
                        <ul>




                            


                            <a href="#"><img src="01.jpg" alt=""></a>
                            <a href="#"><img src="03.jpg" alt=""></a>
                            <a href="#"><img src="02.jpg" alt=""></a>
                            <a href="#"><img src="03.jpg" alt=""></a>
                            <a href="#"><img src="04.jpg" alt=""></a>
                            <a href="#"><img src="05.jpg" alt=""></a>


                        </ul>
                    </li>
                </ul>
            </div>
            <div class="yous">
                <ul>
                    <li class="fen">分类</li>
                    <li class="yu">预告</li>
                </ul>
            </div>
        </div>

    </div>
    <!--轮播  -->
    <div class="back">
        <div class="again">
            <ul class="">
                <li class="atc"><a href="#"><img src="1.jpg" alt=""></a></li>
                <li><a href="#"><img src="2.jpg" alt=""></a></li>
                <li><a href="#"><img src="3.jpg" alt=""></a></li>
            </ul>
            <div class="heng">
                <section class="atv"></section>
                <section></section>
                <section></section>
            </div>
            <div class="lr">
                <span class="prev">&lt;</span>
                <span class="next">&gt;</span>
            </div>
        </div>
    </div>
    <!-- 底部   -->
    <div class="bott">
        <div><img src="11.jpg" alt=""></div>
        <div><img src="22.jpg" alt=""></div>
        <div><img src="33.jpg" alt=""></div>

    </div>
    <section>
        <h2>新人选货好货专区</h2>
    </section> -->
    <!--右边  -->

    <div class="yao">
        <div class="shang">
            <ul>
                <li class="yi"><a href="#"><span><img src="00.png" alt=""></span> 帐号</a>
                    <ul class="zhanghao">
                        <span style="color:#fff">欢迎登录</span>
                        <!-- <li class="kuan"><a href="#">欢迎登录</a></li> -->

                        <li><a href="#">我的订单</a></li>
                        <li><a href="#">我的消息</a></li>

                    </ul>
                </li>
                <li class="er"><a href="#">购物袋</a></li>
                <li class="san"><span class="fa fa-credit-card" style="color:#fff"></span></li>
                <li class="si"><span class="fa fa-heart-o" style="color:#fff"></span></li>
                <li class="wu"><span class="fa fa-star-o" style="color:#fff"></li>
                <li class="liu"><span class="fa fa-refresh" style="color:#fff"></li>
            </ul>
        </div>
        <div class="xia">

        </div>
    </div>



</body>

</html>
<script>
    var atc = document.querySelectorAll('.back .again ul li');
    var atv = document.querySelectorAll('.back .heng section');
    var left = document.querySelector('.back .lr .prev');
    var right = document.querySelector('.back .lr .next');
    var again = document.querySelector('.back .again');
    var index = 0;
    function lef() {
        index = index == atc.length - 1 ? 0 : index + 1;
        lunbo();
    }
    function righ() {
        index = index == atc.length - 1 ? 0 : index + 1;
        lunbo();
    }
    function lunbo() {
        for (var i = 0; i < atc.length; i++) {
            atc[i].className = '';
            atv[i].className = '';
        }
        index++;
        console.log(index);
        if (index == 3) {
            index = 0;
        }
        atc[index].className = 'atc';
        atv[index].className = 'atv';
    }
    var timer = setInterval(lunbo, 1000);


    for (i = 0; i < atv.length; i++) {
        atv[i].index = i;
        atv[i].onmouseover = function () {

            clearInterval(timer);
            timer = null;
            index = this.index - 1
            lunbo();
        }
        atv[i].onmouseout = function () {


            if (timer) {
                return;
            } else {
                timer = setInterval(lunbo, 1000);
            }
        }
    }
    again.onmouseover = function () {
        clearInterval(timer);
        timer = null;
        left.style.display = 'block';
        right.style.display = 'block';
    }
    again.onmouseout = function () {

        left.style.display = 'none';
        right.style.display = 'none';
        if (timer) return;
        timer = setInterval(lunbo, 1000);


    }
    left.onclick = function () {
        righ();

    }

    right.onclick = function () {
        lef();
    }

</script>